<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>免检报告信息</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <link href="${WEB_PATH}/resources/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
 	<style>
    	.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.account:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测基本信息";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.account {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		}
		
		.jyjg:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测机构";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -2px;
		}
		.jyjg {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		
		.czxx:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测线";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.czxx {
		    margin-left: 0px;
		    margin-top: 10px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.search{
		    width:300px;
		}
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <!-- Panel Other -->
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>免检基本信息</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">  
                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap"> 
                            <div class="example"> 
                            	<div style="" class="demo ui-sortable">
                            		 <div class="row">
			                            <div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>检测机构名称：</label>
						                         <input name="JYJGMC" id="JYJGMC"   type="text"  class="form-control" placeholder="">
			                                </div> 
			                            </div>
			                             <div class="col-sm-3"> 
			                                <div class="form-group">
			                                    <label>号牌号码：</label>
			                                    <input name="HPHM" id="HPHM"   type="text"  class="form-control" placeholder="">
			                                </div> 
			                            </div>
			                            <div class="col-sm-3" style="padding-top: 22px;">
			                                 <button type="button" class="btn btn-primary" id="search">查询</button>
			                            </div> 
			                        </div>
			                    </div>
                                <table id="exampleTableEvents" >
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-radio="true"></th>  
                                            <th data-field="ID" data-visible = "false" >id</th>  
								            <th data-field="JYJGMC" >检验机构名称</th> 
								            <th data-field="JCBH">检测信息编码</th> 
								            <th data-field="HPHM">号牌号码</th>
								            <th data-field="CJH">车架号</th>
								            <th data-field="CZXM">车主姓名</th>
								            <th data-field="JCKSSJ" data-formatter="formatTime">检测开始时间</th>
								            <th data-field="JCJSSJ" data-formatter="formatTime">检测结束时间</th>
								            <th data-field="ZZPDJG" data-formatter="formatterStatus">操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Other -->
    </div>
    
    <div id="aut_win"></div>
    <@import.tableManagerImportScript/>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="${WEB_PATH}/resources/js/city-picker.data.js"></script>
	<script src="${WEB_PATH}/resources/js/city-picker.js"></script>
    <script >
    	$(function(){
    		$("#JCFFIDS").chosen({width:'100%'});
    		$("#JCLXIDS").chosen({width:'100%'});
    		$("#ZZPDJG").chosen({width:'100%'});
    		
    		
    		$(window).resize(function () {
		        $('#exampleTableEvents').bootstrapTable('resetView');
		    });
		   
		    function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset, 
			        JYJGMC:$("#JYJGMC").val(),
			        HPHM:$("#HPHM").val(),
			        maxrows: params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	$("#exampleTableEvents").bootstrapTable({
	            url: "${WEB_PATH }/reg/testbasic/getFreePage.do",
	            method: 'get',
	            search:true,
	            pagination:true,
	            pageNumber:1,  
	            pageSize:10,   
	            showRefresh:false, 
	            showColumns:false,
	            detailView:true,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            minimumCountColumns: 1, 
	            search: false,    //隐藏搜索框
	            clickToSelect: true,
	            onExpandRow:subTableFormatter,  
	        });
	        
	        $('input.form-control.input-outline').attr("placeholder","请输入商户名称/联系人/联系人电话"); //设置搜索提示信息
	        
        });
        
        function subTableFormatter(index, row, $detail){
			var info = $detail.html('<div id="info"></div>').find('#info');
			info.load("${WEB_PATH}/reg/testbasic/view/freedetail.do?id="+row.ID);
		}
        
         //点击查询搜索
		$("#search").click(function(){
			$("#exampleTableEvents").bootstrapTable('refresh');
		});
        
        
        function success(result){  
			if(result.success == true){ 
				swal({
			        title: "操作成功",
			        text: result.msg
		    	})
		    	$("#exampleTableEvents").bootstrapTable('refresh');
			}else{
				$('#saveBut').attr("disabled",false);    
				swal({
			        title: "操作失败",
			        text: result.msg
		    	})
			}
		}
		
		Date.prototype.Format = function(fmt){ //author: meizz   
		  var o = {   
		    "M+" : this.getMonth()+1,                 //月份   
		    "d+" : this.getDate(),                    //日   
		    "h+" : this.getHours(),                   //小时   
		    "m+" : this.getMinutes(),                 //分   
		    "s+" : this.getSeconds(),                 //秒   
		    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		    "S"  : this.getMilliseconds()             //毫秒   
		  };   
		  if(/(y+)/.test(fmt))   
		    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		  for(var k in o)   
		    if(new RegExp("("+ k +")").test(fmt))   
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		  return fmt;   
		}  
		
		
		function formatTime(val){
		 	var tt=new Date(val).Format("yyyy-MM-dd hh:mm:ss");
    		return tt; 
		}
		
		
		
		
		function formatterStatus(index, row, element){
			var tt = '';
		 	 	tt= '<button class="btn btn-outline btn-success btn-xs" type="button" jcxxbh = "'+row.JCBH+'" jccph = "'+row.HPHM+'" jcbgmc = "'+row.BGMC+'" jcxxzt="'+row.JCXXZT+'" onClick="Print(this);"><i class="iconfont" style="font-size:14px;font-style:normal;" >&#xe626;</i>&nbsp;打印</button>';
		 		tt += '<button class="btn btn-outline btn-success btn-xs" style="margin-left:10px;" type="button" jcxxbh = "'+row.JCBH+'" jccph = "'+row.HPHM+'" jcbgmc = "'+row.BGMC+'" jcxxzt="'+row.JCXXZT+'" onClick="Print(this);"><i class="glyphicon glyphicon-play-circle" ></i>查看</button>';
    		return tt;
		} 
		
		function Print(obj){
		     var cph = obj.getAttribute('jccph');
		     var jcbgmc = obj.getAttribute('jcbgmc');
		     var jcxxbh = obj.getAttribute('jcxxbh');
		     openPrit(cph,jcbgmc,jcxxbh);
		}
		
		function openPrit(cph,jcbgmc,jcxxbh){
			layer.open({
			      type: 2,
			      title: '打印------【号牌号码：'+cph+'】<font color="red"></font>',
			      shadeClose: false, 
			      shade: 0.3,
			      maxmin: false, //开启最大化最小化按钮
			      area: ['98%', '90%'],
			      content: "${WEB_PATH }/ports/report/freePrint.do?jcxxbh="+jcxxbh,
			      btn: ['<i class="iconfont" style="font-size:14px;font-style:normal;" >&#xe626;</i>&nbsp;打印','取消'],
			      yes: function(index, layero){
				      var body = layer.getChildFrame('body', index);
				      var iframeWin = window[layero.find('iframe')[0]['name']];
				      iframeWin.bgdy();
				  },
				  cancel: function(){
					  layer.closeAll();
				  }
			});
		}
		
        
    </script>
</body>

</html>